<template>
    <div class="all">
        <div>
            <input type="text" placeholder="请输入内容">
            <input type="button" value="查询">
            <input type="button" value="新增" @click="EditAddBook()">
        </div>
        <div>
            <table>
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>书名</th>
                        <th>作者</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="item in booklist":id="item.id">
                       
                        <td>{{  item.id}}</td>
                        <td>{{ item.bookName }}</td>
                        <td>{{ item.author }}</td>
                        <td>
                            <input type="button" value="修改">
                            <input type="button" value="删除" @click="bookDelete(item.id)">
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>
<script setup>
import { getAll,itemDel} from '@/api/bookapi.js';
import { reactive,onMounted } from 'vue';
import { useRouter } from 'vue-router';
let booklist = reactive([])
let router = useRouter();



function EditAddBook(){
    router.push('/bookAdd')
}
function bookDelete(id){
    if(confirm("真的删除吗？")){
       console.log(id);
       itemDel(id)
       window.location.reload();
    }
    
}
onMounted(async ()=>{
    console.log(5555);
    
    let res = await getAll();
   console.log(res);
   booklist.push(...res.data)
})

</script>